<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户管理 - AI面试系统</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <nav
      class="navbar navbar-expand-lg navbar-dark"
      style="
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      "
    >
      <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="#">
          <i class="bi bi-robot me-2" style="font-size: 1.5rem"></i>
          AI面试系统 - 用户管理
        </a>
        <button
          class="navbar-toggler border-0"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <span class="nav-link d-flex align-items-center">
                <i class="bi bi-person-circle me-2"></i>
                欢迎，[[${#authentication?.principal?.username ?: '管理员'}]]
              </span>
            </li>
            <li class="nav-item">
              <a
                class="nav-link active d-flex align-items-center"
                th:href="@{/admin/users}"
              >
                <i class="bi bi-people me-2"></i>用户管理
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link d-flex align-items-center"
                th:href="@{/interview}"
              >
                <i class="bi bi-house me-2"></i>返回系统
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link d-flex align-items-center"
                th:href="@{/logout}"
              >
                <i class="bi bi-box-arrow-right me-2"></i>退出登录
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container mt-4">
      <div class="row">
        <div class="col-12">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
              <h2 class="mb-1 d-flex align-items-center">
                <i
                  class="bi bi-people text-primary me-3"
                  style="font-size: 2rem"
                ></i>
                用户管理
              </h2>
              <p class="text-muted mb-0">管理系统用户和权限</p>
            </div>
            <a
              th:href="@{/admin/users/create}"
              class="btn btn-primary btn-lg"
              style="
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border: none;
                border-radius: 15px;
              "
            >
              <i class="bi bi-plus-circle me-2"></i> 添加用户
            </a>
          </div>

          <!-- 消息提示 -->
          <div
            th:if="${successMessage}"
            class="alert alert-success alert-dismissible fade show"
            role="alert"
          >
            [[${successMessage}]]
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="alert"
            ></button>
          </div>

          <div
            th:if="${errorMessage}"
            class="alert alert-danger alert-dismissible fade show"
            role="alert"
          >
            [[${errorMessage}]]
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="alert"
            ></button>
          </div>

          <!-- 用户列表 -->
          <div
            class="card border-0 shadow-lg"
            style="border-radius: 20px; overflow: hidden"
          >
            <div
              class="card-header text-white"
              style="
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border: none;
              "
            >
              <h5 class="mb-0 d-flex align-items-center">
                <i class="bi bi-list-check me-2"></i>
                用户列表
              </h5>
            </div>
            <div class="card-body p-0">
              <div th:if="${users.isEmpty()}" class="text-center py-5">
                <div class="p-5">
                  <i
                    class="bi bi-person-x text-primary"
                    style="font-size: 4rem"
                  ></i>
                  <h4 class="text-primary mt-3">暂无用户</h4>
                  <p class="text-muted">点击上方按钮添加第一个用户</p>
                </div>
              </div>

              <div th:unless="${users.isEmpty()}" class="table-responsive">
                <table class="table table-hover mb-0">
                  <thead class="table-light">
                    <tr>
                      <th class="border-0 px-4 py-3">
                        <i class="bi bi-hash me-2 text-primary"></i>ID
                      </th>
                      <th class="border-0 px-4 py-3">
                        <i class="bi bi-person me-2 text-primary"></i>用户名
                      </th>
                      <th class="border-0 px-4 py-3">
                        <i class="bi bi-person-badge me-2 text-primary"></i>全名
                      </th>
                      <th class="border-0 px-4 py-3">
                        <i class="bi bi-envelope me-2 text-primary"></i>邮箱
                      </th>
                      <th class="border-0 px-4 py-3">
                        <i class="bi bi-shield me-2 text-primary"></i>角色
                      </th>
                      <th class="border-0 px-4 py-3">
                        <i class="bi bi-gear me-2 text-primary"></i>操作
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="user : ${users}" class="border-bottom">
                      <td class="px-4 py-3">
                        <div class="d-flex align-items-center">
                          <div
                            class="bg-primary bg-opacity-10 rounded-circle p-2 me-3"
                          >
                            <i class="bi bi-hash text-primary"></i>
                          </div>
                          <span class="fw-semibold">[[${user.id}]]</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="d-flex align-items-center">
                          <div
                            class="bg-info bg-opacity-10 rounded-circle p-2 me-3"
                          >
                            <i class="bi bi-person text-info"></i>
                          </div>
                          <strong>[[${user.username}]]</strong>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="d-flex align-items-center">
                          <div
                            class="bg-success bg-opacity-10 rounded-circle p-2 me-3"
                          >
                            <i class="bi bi-person-badge text-success"></i>
                          </div>
                          [[${user.fullName}]]
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="d-flex align-items-center">
                          <div
                            class="bg-warning bg-opacity-10 rounded-circle p-2 me-3"
                          >
                            <i class="bi bi-envelope text-warning"></i>
                          </div>
                          [[${user.email}]]
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <span
                          th:if="${user.role.name() == 'ADMIN'}"
                          class="badge bg-danger fs-6 px-3 py-2"
                        >
                          <i class="bi bi-shield-check me-1"></i>管理员
                        </span>
                        <span
                          th:if="${user.role.name() == 'USER'}"
                          class="badge bg-primary fs-6 px-3 py-2"
                        >
                          <i class="bi bi-person me-1"></i>普通用户
                        </span>
                      </td>
                      <td class="px-4 py-3">
                        <div class="btn-group" role="group">
                          <a
                            th:href="@{/admin/users/edit/{id}(id=${user.id})}"
                            class="btn btn-sm btn-outline-primary"
                            title="编辑"
                            style="border-radius: 8px"
                          >
                            <i class="bi bi-pencil"></i>
                          </a>
                          <a
                            th:href="@{/admin/users/change-password/{id}(id=${user.id})}"
                            class="btn btn-sm btn-outline-warning"
                            title="修改密码"
                            style="border-radius: 8px"
                          >
                            <i class="bi bi-key"></i>
                          </a>
                          <button
                            type="button"
                            class="btn btn-sm btn-outline-danger"
                            th:onclick="'deleteUser(' + ${user.id} + ')'"
                            title="删除"
                            style="border-radius: 8px"
                          >
                            <i class="bi bi-trash"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">确认删除</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
            ></button>
          </div>
          <div class="modal-body">确定要删除这个用户吗？此操作不可撤销。</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <form id="deleteForm" method="post" style="display: inline">
              <button type="submit" class="btn btn-danger">删除</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      function deleteUser(userId) {
        const deleteForm = document.getElementById("deleteForm");
        deleteForm.action = "/admin/users/delete/" + userId;
        const deleteModal = new bootstrap.Modal(
          document.getElementById("deleteModal")
        );
        deleteModal.show();
      }
    </script>
  </body>
</html>
